<template>
  <div class="map-relative">
    <slot name="setting" :map="map" :basemapGallery="basemapGallery"></slot>
    <div class="mapList">
      <slot name="drawing" :map="map" :editToolbar="editToolbar" :drawToolbar="drawToolbar"></slot>
    </div>
    <div id="swipeDiv"></div>
    <!-- <div class="mapList" v-show="current == 'toggle'">
      <scroll-bar style="width:250px; height:550px;color:#fff">
      </scroll-bar>
    </div> -->
    <!-- <div class="mapList measure" v-show="current == 'distance'">
      <div id="measurementDiv"></div>
    </div>
    <div id="search"></div> -->
  </div>
</template>
<script>
/* eslint-disable */
import { loadModules } from 'esri-loader'
const options = {
  url: 'https://js.arcgis.com/3.46/',
  dojoConfig: {
    async: true,
    packages: [
      {
        location: '/modules',
        name: 'modules'
      }
    ]
  }
}
export default {
  name: 'mapview',
  props: {
    current: {
      type: String,
      default: ''
    },
    dataSources: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      map: null,
      editToolbar: null,
      basemapGallery: null,
      dischargeOutlets: []
    }
  },
  created() {},
  mounted() {
    this.testTDT()
  },
  methods: {
    testTDT() {
      // 这里可以使用自己的地址
      loadModules(
        [
          'esri/map',
          'modules/WebTiledTDTLayerC',
          'esri/dijit/Basemap',
          'esri/dijit/BasemapLayer',
          'esri/dijit/BasemapGallery',
          'esri/toolbars/edit',
          'esri/toolbars/draw',
          'dojo/_base/event',
          'esri/dijit/OverviewMap',
          'esri/layers/TileInfo',
          'esri/layers/WebTiledLayer',
          'esri/layers/ArcGISDynamicMapServiceLayer',
          'esri/SpatialReference',
          'esri/geometry/Extent',
          'esri/geometry/Point',
          'esri/graphic',
          'esri/layers/GraphicsLayer',
          'esri/symbols/PictureMarkerSymbol',
          'esri/tasks/GeometryService',
          'esri/tasks/ProjectParameters',
          'dojo/on',
          'dojo/dom',
          'dojo/domReady!'
        ],
        options
      ).then(
        ([
          Map,
          WebTiledTDTLayer,
          Basemap,
          BasemapLayer,
          BasemapGallery,
          Edit,
          Draw,
          event,
          OverviewMap,
          TileInfo,
          WebTiledLayer,
          ArcGISDynamicMapServiceLayer,
          SpatialReference,
          Extent,
          Point,
          Graphic,
          GraphicsLayer,
          PictureMarkerSymbol,
          GeometryService,
          ProjectParameters,
          on,
          dom
        ]) => {
          this.map = new Map(this.$el, {
            logo: false,
            // 经纬度坐标
            // center: [119, 25.322],
            center: [260, 45.322],
            zoom: 4
          })
          this.map.setMapCursor('pointer') //设置鼠标在map上时的样式为手型
          this.putianExtent = new Extent({
            xmin: 118.20304870605469,
            ymin: 24.948190185546878,
            xmax: 119.96086120605469,
            ymax: 25.826409790039065,
            spatialReference: {
              wkid: 4326
            }
          })
          // this.map.setExtent(this.putianExtent)
          // var layer = new WebTiledTDTLayer('http://${subDomain}.tianditu.gov.cn', { type: 'vec' })
          // this.map.addLayer(layer)
          // var layer_anno = new WebTiledTDTLayer('http://${subDomain}.tianditu.gov.cn', { type: 'cia' })
          // this.map.addLayer(layer_anno)

          this.map.on('load', (res) => {
            this.loadEditTool({ Edit, Draw })
            this.$emit('update:loaded', true)
            // 鹰眼支持WebTiledLayer；不支持TiledMapServiceLayer；
          })
          this.map.on('click', (evt) => {
            event.stop(evt)
            this.editToolbar.deactivate()
          })

          this.loadBasemapGallery({ Extent, SpatialReference, TileInfo, Basemap, BasemapLayer, BasemapGallery })

          // //墨卡托投影
          // this.initialExtent = new Extent(
          //   13180709.813449485,
          //   2855211.6152346493,
          //   13227795.02287309,
          //   2875199.898131196,
          //   this.map.spatialReference
          // )
          // this.map.setExtent(this.initialExtent)
        }
      )
    },
    loadEditTool(mapModules) {
      this.editToolbar = new mapModules.Edit(this.map)
      this.drawToolbar = new mapModules.Draw(this.map)
    },
    loadBasemapGallery(mapModules) {
      /**
       * https://developers.arcgis.com/javascript/3/jsapi/basemap-amd.html
       * https://developers.arcgis.com/javascript/3/jsapi/basemaplayer-amd.html
       * https://developers.arcgis.com/javascript/3/jsapi/basemapgallery-amd.html
       * https://developers.arcgis.com/javascript/3/jssamples/widget_basemap.html
       */
      var sr = new mapModules.SpatialReference({
        wkid: 4326
      })

      var fullExtent = new mapModules.Extent(-180.0, -90.0, 180.0, 90.0, sr)
      var tileInfo = new mapModules.TileInfo({
        rows: 256,
        cols: 256,
        origin: {
          x: -180,
          y: 90
        },
        spatialReference: {
          wkid: 4326
        },
        lods: [
          { level: '1', scale: 295829355.45, resolution: 0.703125 },
          { level: '2', scale: 147914677.725, resolution: 0.3515625 },
          { level: '3', scale: 73957338.8625, resolution: 0.17578125 },
          { level: '4', scale: 36978669.43125, resolution: 0.087890625 },
          { level: '5', scale: 18489334.715625, resolution: 0.0439453125 },
          { level: '6', scale: 9244667.3578125, resolution: 0.02197265625 },
          { level: '7', scale: 4622333.67890625, resolution: 0.010986328125 },
          { level: '8', scale: 2311166.839453125, resolution: 0.0054931640625 },
          { level: '9', scale: 1155583.4197265625, resolution: 0.00274658203125 },
          { level: '10', scale: 577791.7098632812, resolution: 0.001373291015625 },
          { level: '11', scale: 288895.8549316406, resolution: 0.0006866455078125 },
          { level: '12', scale: 144447.9274658203, resolution: 0.00034332275390625 },
          { level: '13', scale: 72223.96373291015, resolution: 0.000171661376953125 },
          { level: '14', scale: 36111.98186645508, resolution: 0.0000858306884765625 },
          { level: '15', scale: 18055.99093322754, resolution: 0.00004291534423828125 },
          { level: '16', scale: 9027.99546661377, resolution: 0.000021457672119140625 },
          { level: '17', scale: 4513.997733306885, resolution: 0.000010728836059570312 },
          { level: '18', scale: 2256.9988666534423, resolution: 0.000005364418029785156 },
          { level: '19', scale: 1128.4994333267211, resolution: 0.000002682209014892578 }
        ]
      })
      var vtlayer = new mapModules.BasemapLayer({
        type: 'WebTiledLayer',
        subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
        tileInfo,
        fullExtent,
        templateUrl:
          'http://${subDomain}.tianditu.gov.cn/vec_c/wmts?tk=e7a4ecf4e9b91b917bc4a597c517bfba&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILECOL=${col}&TILEROW=${row}&TILEMATRIX=${level}'
      })
      var vnlayer = new mapModules.BasemapLayer({
        type: 'WebTiledLayer',
        subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
        tileInfo,
        fullExtent,
        templateUrl:
          'http://${subDomain}.tianditu.gov.cn/cva_c/wmts?tk=e7a4ecf4e9b91b917bc4a597c517bfba&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILECOL=${col}&TILEROW=${row}&TILEMATRIX=${level}'
      })
      var itlayer = new mapModules.BasemapLayer({
        type: 'WebTiledLayer',
        subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
        tileInfo,
        fullExtent,
        templateUrl:
          'http://${subDomain}.tianditu.gov.cn/img_c/wmts?tk=e7a4ecf4e9b91b917bc4a597c517bfba&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILECOL=${col}&TILEROW=${row}&TILEMATRIX=${level}'
      })
      var inlayer = new mapModules.BasemapLayer({
        type: 'WebTiledLayer',
        subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
        tileInfo,
        fullExtent,
        templateUrl:
          'http://${subDomain}.tianditu.gov.cn/cia_c/wmts?tk=e7a4ecf4e9b91b917bc4a597c517bfba&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILECOL=${col}&TILEROW=${row}&TILEMATRIX=${level}'
      })
      var basemapVec = new mapModules.Basemap({
        layers: [vtlayer, vnlayer],
        id: 'vector',
        title: 'vector',
        thumbnailUrl: '/static/image/maptype_vec.png'
      })
      var basemapImg = new mapModules.Basemap({
        layers: [itlayer, inlayer],
        id: 'image',
        title: 'image',
        thumbnailUrl: '/static/image/maptype_img.png'
      })
      var basemaps = [basemapVec, basemapImg]
      this.basemapGallery = new mapModules.BasemapGallery(
        {
          showArcGISBasemaps: false,
          basemaps,
          map: this.map
        }
        // 'basemapGalleryDiv'
        // dojo.create('div')
      )
      this.basemapGallery.startup()
    },
    loadLayerSwipe(mapModules) {
      // var selectedBasemap = this.basemapGallery.getSelected()
      // var toggleBasemap
      // if (selectedBasemap.id == 'image') {
      //   toggleBasemap = this.basemapGallery.get('vector')
      // } else {
      //   toggleBasemap = this.basemapGallery.get('image')
      // }

      var testlyr = new mapModules.ArcGISDynamicMapServiceLayer(
        'https://sampleserver6.arcgisonline.com/arcgis/rest/services/SampleWorldCities/MapServer'
      )
      this.map.addLayer(testlyr)

      // var layer = new mapModules.WebTiledTDTLayer('http://${subDomain}.tianditu.gov.cn', { type: 'img' })
      // this.map.addLayer(layer)
      this.swipeWidget = new mapModules.LayerSwipe(
        {
          type: 'vertical', // Try switching to "scope" or "horizontal"
          map: this.map,
          layers: [testlyr]
        },
        'swipeDiv'
      )
      this.swipeWidget.startup()
    }
  },
  beforeDestroy() {
    if (this.map) {
      this.map.destroy()
    }
    if (this.basemapGallery) {
      this.basemapGallery.destroy()
    }
    if (this.editToolbar) {
      this.editToolbar.destroy()
    }
    if (this.search) {
      this.search.destroy()
    }
  },
  watch: {
    current(nl) {
      if (nl != 'distance' && this.measurement) {
        this.measurement.hide()
        this.measurement.clearResult()
        this.measurement.setTool('location', false)
        this.measurement.setTool('distance', false)
        this.measurement.setTool('area', false)
      } else {
        if (this.measurement) {
          this.measurement.show()
        }
      }
    },
    dataSources: {
      immediate: false,
      deep: true,
      handler(val) {
        console.log(val, this.dataSources)
        // this.testExcel()
      }
    }
  }
}
</script>
<style lang="less" scoped>
@import url('https://js.arcgis.com/3.34/esri/css/esri.css');
.mapList {
  position: absolute;
  right: 10px;
  top: 0;
  z-index: 70;
  background: rgba(48, 65, 86, 0.8);
}
.measure {
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  width: 220px;
}
#titlePane {
  width: 280px;
}
</style>
<style lang="less">
.map-relative {
  height: 100%;
  .esriBasemapGalleryLabelContainer {
    height: 40px !important;
  }
  #myOverviewMapDiv {
    position: absolute;
    right: 35px;
    top: 5px;
    z-index: 998;
    width: 100px;
    height: 100px;
  }
  .arcgisSearch {
    z-index: 20;
    height: 95px;
    width: 400px;
    position: absolute;
    top: 5px;
    left: 50% !important;
    transform: translateX(-50%);
  }

  .esriMeasurementResultValue {
    font-size: 1rem;
  }
  .dijitToggleButtonIconChar,
  .esriMeasurementSeparator,
  .dijitOffScreen {
    display: none;
  }
  .esriMeasurement .dijitContentPane {
    text-align: center;
  }
  .esriPopup .contentPane {
    padding-top: 30px;
    width: 270px;
    text-align: center;
    overflow: hidden;
  }
}
</style>
